<script setup lang="ts">
import { ref } from 'vue'
import { ElTabs, ElTabPane } from 'element-plus'
import type { Node } from '@/types/schema'
import Renderer from './Renderer.vue'

const props = defineProps<{ node: Node }>()
const emit = defineEmits<{ (e: 'select', id: string): void }>()

const activeTab = ref(props.node.children?.[0]?.id || '')
</script>

<template>
  <ElTabs v-model="activeTab" type="card">
    <ElTabPane
      v-for="(child, index) in node.children"
      :key="child.id"
      :label="child.props.tabLabel || 'Tab ' + (index + 1)"
      :name="child.id"
    >
      <Renderer
        v-for="grandChild in child.children"
        :key="grandChild.id"
        :node="grandChild"
        @select="$emit('select', grandChild.id)"
      />
    </ElTabPane>
  </ElTabs>
</template>

<style scoped>

</style>
